<template>
	<div class="message">
		<el-icon size="32" @click="handleBack()">
			<ArrowLeft style="cursor: pointer" />
		</el-icon>

		<div class="avatar flex-b-c" style="margin-top: 50px">
			<div class="flex-s-c">
				<img style="width: 50px; height: 50px; border-radius: 50%" :src="'/images/' + messageData.image + '.jpg'" alt="" />
				<div style="margin-left: 10px">
					<p style="font-size: 16px">{{ messageData.name }}</p>
					<p style="font-size: 14px; color: #999999">15m</p>
				</div>
			</div>
			<div class="item-right" style="margin-left: 40px">
				<p>
					Order Volume:
					<span :style="{ color: 'red' }"> 0.021 </span>
					<img src="/images/icon/down.svg" alt="Decrease" />
					Order Count:
					<span :style="{ color: 'black' }"> 10 </span>
					<img src="/images/icon/up.svg" alt="Increase" />
					Current Value:
					<span :style="{ color: 'black' }"> 0.105 </span>
					<img src="/images/icon/up.svg" alt="Increase" />
				</p>
			</div>
		</div>

		<div style="margin-top: 20px">
			<textarea
				style="width: 100%; height: 500px; resize: none; border: 1px solid #999999; outline: none; border-radius: 10px; padding: 20px; box-sizing: border-box"
			></textarea>
		</div>
		<div style="position: relative">
			<input style="width: 100%; height: 50px; border: 1px solid #999999; box-sizing: border-box; padding: 0 20px" />
			<button style="position: absolute; right: 10px; top: 10px; height: 30px; width: 80px">Send</button>
		</div>
	</div>
</template>
<script setup>
import { ArrowLeft } from "@element-plus/icons";
import router from "@/router";

const handleBack = () => {
	router.back();
};

const messageData = JSON.parse(localStorage.getItem("message"));
</script>
<style scoped lang="scss"></style>
